<div class="home_container">
    <div class="dashboard">
      <div class="el-col-4">
        <div class="box">
          <div class="el-row">
            <div class="el-col-1">
              <!-- //原则上是给firstPg添加图片 -->
              <img src='./images/home.img/三农.a0e22daa.png' alt="" width="50px" height="50px">
            </div>
            <div class="el-col-2">
              <div class="title">校 内 新 闻</div>
              <div class="num">20</div>
            </div>
          </div>
        </div>
      </div>
     
      <div class="el-col-4">
        <div class="box">
          <div class="el-row">
            <div class="el-col-1">
              <img src="./images/home.img/科普.d2ca1ca4.png" alt="" width="50px" height="50px">
            </div>
            <div class="el-col-2">
              <div class="title">通 知 公 告</div>
              <div class="num">20</div>
            </div>
          </div>
        </div>
      </div>

      <div class="el-col-4">
        <div class="box">
          <div class="el-row">
            <div class="el-col-1">
              <img src="./images/home.img/科技.ab6abbf1.png" alt="" width="50px" height="50px">
            </div>
            <div class="el-col-2">
              <div class="title">学 术 活 动</div>
              <div class="num">30</div>
            </div>
          </div>
        </div>
      </div>

      <div class="el-col-4">
        <div class="box">
          <div class="el-row">
            <div class="el-col-1">
              <img src="./images/home.img/index.png" alt="" width="50px" height="50px">
            </div>
            <div class="el-col-2">
              <div class="title">媒 体 聚 焦</div>
              <div class="num">84</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="el-col-3">
        <div class="list">
          <img src="./images/home.img/sn_1.f7ff8331.jpg" alt="">
          <table colspan='1' rowspan='1'>
            <thead>
              <tr><th>校园新闻</th></tr>
            </thead>
            <tbody>
              <!-- <tr><td>hh</td></tr> -->
            </tbody>
          </table>
        </div>
      </div>
      <div class="el-col-3">
        <div class="list">
          <img src="./images/home.img/sn_2.fdc90dee.jpg" alt="">
          <table>
            <thead>
              <tr>
                <th>通知公告</th>
              </tr>
            </thead>
            <tbody>

            </tbody>
          </table>
        </div>
      </div>
      <div class="el-col-3">
        <div class="list">
          <img src="./images/home.img/sn_4.186dff8e.jpg" alt="">
          <table>
            <thead>
              <tr>
                <th>学术活动</th>
              </tr>

            </thead>
            <tbody>
              
            </tbody>
          </table>
        </div>
      </div>

      <!-- Button trigger modal -->
      <!-- <button data-toggle="modal" data-target="#staticBackdrop">
        Launch static backdrop modal
      </button> -->

      <!-- Modal -->
      <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="staticBackdropLabel" style="font-size:large"></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
            </div>
          </div>
        </div>
      </div>

    </div>
</div>
<script>
    $.ajax({
    url:'http://123.57.57.227:7788/article/findAll',
    type:'GET',
    headers:{
        'Authorization':sessionStorage.getItem('token'),
    },
    contentType:'application/json',
    success:function(data){
      // console.log(data.data[0].title);
      // console.log(data.data);
      var data=data.data;
      data.slice(1).forEach(function(item){
          $('tbody').eq(0).append(`<tr>
              <td>`+item.title+`</td>
          </tr>`)
      });
      // console.log(data)
      $('tbody').eq(1).append(`<tr>
          <td>`+data[0].title+`</td>
      </tr>`);
      
      //事件代理，移入tr变色其他tr移除颜色
      $('tbody').on('mouseover','tr',function(){
          $(this).css('background','#f3f3f9');
      });
      $('tbody').on('mouseout','tr',function(){
          $(this).css('background','');
      });

     //给tbody设置点击出现模态框
    $('tbody').on('click','tr',function(){
        // $('.modal-dialog modal-lg','show')
        // console.log($(this).text());
        $('tr').attr('data-toggle','modal');
        $('tr').attr('data-target','#staticBackdrop');
        // console.log($(this).text());
        var text=$(this).text();
        data.forEach(function(item){
          // console.log(text.trim())
          if(item.title==text.trim()){
            // console.log(item.content)
            $('.home_container .modal-title').html(item.title);
            $('.home_container .modal-body').html(item.content);
          }
        })
           
              // if(data[i].title==$(this).text()){
              
              // // 
              // }  
          
    })
      
     
     
      
    

    }
  })
</script>

<style>
html,body{
  height: 100%;
}
*{
    padding: 0;
    margin: 0;
  }
  .home_container{
    height:100%;
    position: relative;
  }
  .home_container .dashboard{
    width: 96%;
    height: 92%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin:auto;
  }
  [class*='el-col-']{
    float: left;
    box-sizing: border-box;
  }
  .el-col-4{
    width: 25%;
  }
  .box{
    height: 100px;
    padding: 25px 10px 10px 20px;
    margin-left: 35px;
    background-color:#fff;
    border-radius: 5px;
    box-shadow: 2px 2px 10px #ccc;
  }
  .box .el-row{
    position: relative;
    box-sizing: border-box;
    height:100%;
  }
  .el-col-3{
    width: 33.3333%;
  }
  .list{
    height: 400px;
    background:white;
    margin-left: 20px;
    margin-top: 20px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 2px 10px #ccc;
    box-shadow: 2px 2px 10px #ccc;
    overflow: hidden;
  }
  .el-col-1{
    width: 41%;
    height: 80%;
  }
  .el-col-2{
    width: 59%;
    height: 80%;
  }
  .el-col-2 .title{
    text-align: center;
    font-size: 16px;
    color: #777;
    font-weight: 700;
  }
  .el-col-2 .num{
    text-align: center;
    font-size: 18px;
    color: #333;
    margin-top:5px;
  }
  img{
    border-style: solid;
  }
  .list img{
    width: 100%;
    height: 120px;
    overflow: hidden;
  }
  .el-col-3 table{
    width: 100%;
    border-collapse: separate;
    color: #909399;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
   
  }
  .el-col-3 th,.el-col-3 td{
    border-bottom: 1px solid #dfe6ec;
    text-align: center;
    padding: 9px 0;
  }
  .modal-title,.modal-footer{
    text-align: center;
  }
  </style>






